<template >
   <div class="container" style="margin-top:100px;padding:0px">
    <div class="row" >
            
    <div class="col-xs-12 col-sm-12 col-md-8" >
    

      <div class="col-md-12" style="opacity: 0.9;">

         <div v-swiper:mySwiper="swiperOption"  autoplay:true class="bann">
          <div class="swiper-wrapper"  >

          <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide">
              <a target="_blank" :href="banner.linkUrl">
                  <img :src="banner.imageUrl" :alt="banner.title" class="bannerimg" >
              </a>
          </div> 
          
         </div>
         <div class="swiper-pagination swiper-pagination-white"></div>
         <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
         <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </div>


      </div>

    <div class="col-md-12" >

            <span class="c">热门文章 &nbsp;|&nbsp; Blog</span>
            <ul class="blog">
                <li v-for="course in eduList" :key="course.id" @click="info(course.id)">
                    <img
                        :src="course.cover"
                        class="img-responsive"
                        :alt="course.title"
                      >
                    <p class="title">{{course.title}}</p>
                    <div v-html="course.content" class="cont"></div>
                    <p class="info">
                        <b >{{course.nickname}} &nbsp;/</b>
                        <b class="time">{{course.created}} &nbsp;/</b>
                        <b>{{course.lookCount}} 浏览 &nbsp;/</b>
                        <b>{{course.supportCount}} 点赞 &nbsp;/</b>
                        <b>{{course.commentCount}} 评论 &nbsp;/</b>
                        <b>{{course.collectionCount}} 收藏 &nbsp;</b>
                        
                    </p>
                </li>
            </ul>
        </div>



        </div>
        
        <div class="col-xs-0 col-sm-0 col-md-4">


        <div class="col-md-12">
        <div class="about">
            <img class="background" src="../assets/350.jpg" alt="" />
            <img class="avatar" src="../assets/tx.gif" alt="" />
            <p class="name">棉花糖博客</p>
            <p class="desc">热爱自己</p>
            <div class="line"></div>
            <ul class="social">
              <li>
                <div style="float: left; margin-top: 0px" class="desc">社交:</div>
                <a
                  href="http://wpa.qq.com/msgrd?v=3&uin=694475668&site=qq&menu=yes"
                  target="_blank"
                  ><img src="../assets/icon/QQ.png" alt=""
                /></a>
                <a
                  href="https://www.npmjs.com/settings/bright-boy/packages"
                  target="_blank"
                  ><img src="../assets/icon/npm.png" alt=""
                /></a>
                <a href="https://blog.csdn.net/qq_40942490" target="_blank"
                  ><img src="../assets/icon/csdn.png" alt=""
                /></a>
              </li>
            </ul>
            <div class="line"></div>
            <ul class="social">
              <li>
                <div style="float: left; margin-top: 0px" class="desc">加入我们:</div>
                <a
                  href="https://qm.qq.com/cgi-bin/qm/qr?k=MR8TChVi_FtBishIZO7FvkUNaxb5L7ei&jump_from=webapi"
                  target="_blank"
                  alt="板栗博客"
                  title="板栗博客"
                  style="margin-left: -30px"
                  ><img src="../assets/icon/QQqun.png" alt=""
                /></a>
              </li>
            </ul>
        
          </div>
        </div>


        <div class=" col-md-12" >
      
        <div class="recommend">   
            <span>推荐阅读</span>
             <hr> 
            <ul class="content">
                <li  v-for="hot in hotList" :key="hot.id">
                     <img
                        :src="hot.cover"
                        class="img-responsive"
                        :alt="hot.title"
              
                      >
                    <p class="text">{{hot.title}}</p>
                    <p class="info">
                        <b class="glyphicon glyphicon-star-empty" style="color: orange;"> {{hot.collectionCount}}</b>
                        <b class="glyphicon glyphicon-thumbs-up" style="color: red;"> {{hot.supportCount}}</b>
                        <b class="glyphicon glyphicon-comment"> {{hot.commentCount}}</b>
                    </p>
                </li>
               
            </ul>
        </div>
        


        </div>


        </div>

        </div>
    
    </div>
    
</template>
<script>
import banner from '@/api/banner'
import index from '@/api/index'

export default {
  data () {
    return {

      swiperOption: {
        autoplay:true,
        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      },
      //banner数组
      bannerList:[],
      eduList:[],
      hotList:[],
    }
  },
  created() {
    
    //调用查询banner的方法
    this.getBannerList()
    //调用查询热门课程和名师的方法
    this.getBlogIndex()
    this.getHotBlog()
  },
  methods:{
    //查询热门课程和名师
    info(id){
        this.$router.push({ path:'/blog/'+id  })
    },
    getBlogIndex() {
      index.getIndexData()
        .then(response => {
          this.eduList = response.data.data.list
        })
    },
     getHotBlog(){
      index.getHotData()
        .then(response => {
          this.hotList = response.data.data.hot
        })
    },
    //查询banner数据
    getBannerList() {
      banner.getListBanner()
        .then(response => {
          this.bannerList = response.data.data.list
        })
    }
  }
}
</script>
 <style>
    @media (max-width:1000px){ 
            html,body{
              max-width: 100%;
              overflow-x: hidden;
            }
             .container{
                 width: 100%;
                 overflow:auto;overflow-x: hidden
             }
             .col-xs-0{
             display: none;
              }
              /* .swiper-slide img{
               width:100%
              }
             .swiper-slide{
                height:auto;
              } */
              .bann{
                display:none
              }

     }
       @media (min-width:1000px){ 
          body{
          background-image: url(../assets/background2.jpg);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: fixed;
  } 

     }
 *{
     padding: 0;
     margin: 0;
 }
   .swiper-slide img{
    width:100%;
    height: 420px;
    border-radius: 10px;
  }
  
  .about {
    position: relative;
    text-align: center;
    padding-bottom:20px;
    background-color:#fff;
    border-radius: 10px;
    opacity: 0.9;
            }
  .about:hover{
    opacity:1;
  }
  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 125px;
    z-index: 1;
     border-radius: 10px;

  }
   .avatar {
    position: relative;
    margin: 75px auto 15px;
    width: 100px;
    height: 100px;
    border: 5px solid gray;
    border-radius: 50%;
    z-index: 9;
  }
  .name {
    font-size: 22px;
    color: red;
    line-height: 30px;
    font-weight: 700;
  }
  .desc {
    font-size: 15px;
    color:red;
    line-height: 30px;
    font-weight: 100;
  }
  .social {
    text-align: center;
    padding: 0 20px;
    margin-top: 15px;
    list-style: none;
  }
  .social li{
    padding: 8px;
  }
  .social li a{
        display: inline-block;
        width: 44px;
        height: 44px;
        margin: auto;

        
      }
  .social li a img {
          width: 90%;
        }
  .line {
    height: 1px;
    background-color:red;
    margin: 10px 20px;
  }
  .recommend{
    top:20px;
    position: relative;
    background-color:#fff;
    border-radius: 10px;
    opacity: 0.9;
    height:380px;
    overflow: hidden;
  }
  .recommend:hover{
    opacity: 1.0;
  }
  .recommend hr{
      background-color: rgb(250,206,224);
      width: 280px;
      height:4px;
      position:absolute;
      top:25px;
      left: 0px;
  }
  .recommend span{
      display:inner-block;
      position: absolute;
      font-size: 20px;
      left: 20px;
      top: 10px;
      font-weight: bold;
   
  }
  ul{
    list-style: none;
  }
  .recommend .content{
    background-color:#fff;
    position: absolute;
    width: 100%;
    top:47px;
    overflow: hidden;
  }

  .content li{
      position: relative;
      width: 100%;
      margin-left: 20px;
      height: 80px;
      margin-top: 25px;
  }
  .content li img{
    position: absolute;
    width: 110px;
    height: 80px;
    border-radius: 5px;
  }
  .content li .text{
    width: 100px;
    position: absolute;
    left: 120px;
    font-size:20px;
  }
  .content li .info{
    position: absolute;
    left:120px;
    top:55px
  }
  .content b{
      font-size: 10px;
      padding: 3px;
      cursor: pointer;
        color:gray;
  }
  .content .info .shijian{
  
    
      font-size: 12px;
  }
  .c{
      display: block;
      font-size: 20px;
      font-weight: bold;
      padding-top:15px
  }
  .blog{
    width: 100%;
  }
  .blog li{
      position: relative;
      width: 100%;
      height: 180px;
      margin-top: 20px;
      background-color: white;
      opacity: 0.9;
      border-radius: 10px;
      
  }
  .blog li:hover{
    opacity: 1.0;
  }
  .blog li img{
    position: absolute;
    width: 200px;
    border-radius: 10px;
    top:15px;
    left:20px
  }
   @media (max-width:1000px){ 
  .blog li img{
    width:150px;
    margin-left:-10px
  }
  .blog li{
    height:140px
  }

  .blog li .title{
    margin-left:-70px
  }
   .blog li .info{
     margin-left:-70px;
     margin-top:-40px
   }
    .blog li .cont{
       margin-left:-70px
    }
     }
  .blog li .title{
    position: absolute;
    left: 240px;
    top:20px;
    font-size:20px;
    font-weight: bold;
  }
  .blog li .info{
    position: absolute;
    left:240px;
    top:140px
  }
  .blog li .cont{
    width: 150px;
    position: absolute;
    left: 240px;
    top:50px;
    height:15px;
    overflow: hidden;
  }
  .blog b{
      padding: 3px;
      cursor: pointer;
      
      color:gray;
      font-size: 13px;
  }

     </style>